<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>用户管理</title>
    <link rel="shortcut icon" href="assets/manager/favicon.ico"> 
    <link href="assets/manager/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="assets/manager/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="assets/manager/css/animate.css" rel="stylesheet">
    <link href="assets/manager/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div><h2 class="crumbs">用户管理</h2></div>
        <div class="row">
            <div class="col-sm-3">
                <span class="userMbq">状态：</span>
                <select class="form-control m-b userMsleinp" name="account">
                    <option>正常</option>
                    <option>锁定</option>
                </select>
            </div>
            <div class="col-sm-3">
                <span class="userMbq">用户名：</span>
                <input type="text" class="form-control userMsleinp">
            </div>
            <div class="col-sm-1"><button type="button" class="btn btn-outline btn-info">搜索</button></div>
        </div>
        <div class="row">
            <div class="ibox float-e-margins">
                <table class="table table-bordered usersTab">
                    <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="15%">用户名</th>
                            <th width="5%">性别</th>
                            <th width="5%">年龄</th>
                            <th width="15%">手机号</th>
                            <th width="20%">Email</th>
                            <th width="10%">出生日期</th>
                            <th width="5%">状态</th>
                            <th width="20%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="usersList">
                    </tbody>
                </table>
            </div>
            <div class="pageBox"><p></p></div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="assets/manager/js/jquery.min.js?v=2.1.4"></script>
    <script src="assets/manager/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="assets/manager/js/plugins/layer/layer.min.js"></script>
    <!-- Flot -->
    <script src="assets/manager/js/plugins/flot/jquery.flot.js"></script>
    <script src="assets/manager/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="assets/manager/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="assets/manager/js/plugins/flot/jquery.flot.pie.js"></script>
    <!-- 自定义js -->
    <script src="assets/manager/js/content.js"></script>
    <script src="assets/manager/js/pageBox.js"></script>
    <!--flotdemo-->
    <script type="text/javascript">
    $(document).ready(function(){
    	var $page=1;$pageSize=6; 
    	getUsers($page,$pageSize);
    	function getUsers(rpage,rpageSise){
    		$.post("getUsers",{page:rpage,pageSize:rpageSise},function(data){
            	pageBox(data.pageInfo);
            	var $tbody = $("#usersList");
            	$tbody.find("tr").remove();
            	for(var i=0;i<data.pageInfo.list.length;i++){
            		var $user = data.pageInfo.list[i];
            		$tr = $("<tr></tr>");
            		var $buttonTd = $("<button type='button' id='lock' data-name='" + $user.name + "' class='btn btn-outline btn-warning'>锁定</button>"
            				+ "<button type='button' id='del' data-name='" + $user.name + "'  class='btn btn-outline btn-danger'>删除</button>");
            		var $n = i+ 1;
            		$trHtml = $("<td>" + $n + "</td>"
            				+ "<td>" + $user.name + "</td>"
            				+ "<td>" + $user.sex + "</td>"
            				+ "<td>" + $user.age + "</td>"
            				+ "<td>" + $user.phone + "</td>"
            				+ "<td>" + $user.email + "</td>"
            				+ "<td>" + $user.bornD + "</td>"
            				+ "<td>" + $user.state + "</td>"
            		);
            		$tr.append($trHtml);
            		$tr.append($buttonTd);
            		$tbody.append($tr);
            	}
            });
    	}
        
        $("#usersList").on("click","#del",function(){
        	var $userName = $(this).attr("data-name");
        	var $del = confirm("确定要删除这个用户?");
        	if($del){
        		del($userName);
        		$(this).parents("tr").remove();
        		if($("#usersList tr").length == 0){
        			$page = --$page;
        		}
        		getUsers($page,$pageSize);
        	}
        });
        function del(name){
        	$.get("delUser?userName=" + name,function(data){
        		if(data.res == 1){
        			alert("删除成功！");
        		}
        	})
        }
        
        function lockOrUnlock(name,type){
        	if(type == "锁定"){
        		
        	}
        }
        
        //分页
        $(".pageBox").on("click","a",function(){
        	var $cPage = $(this).attr("data-page");
        	var $maxPage =  $(".pageBox p").find("a:last").html();
        	if($cPage  == 0 || $(this).attr("class") == "active"){
        		return false;
        	}else if($page == $maxPage && ($(this).html() == "下一页" || $(this).html() == "尾页")){
        		return false;
        	}else if($page == 1 && ($(this).html() == "上一页" || $(this).html() == "首页")){
        		return false;
        	}
        	else{
        		$page = $cPage;
        		getUsers($page,$pageSize);
        		return false;
        	}
        });
      	//分页
    });
    </script>
</body>
</html>